<template>
  <div>
    <el-timeline >
      <el-timeline-item
        v-for="(memorabilia, index) in memorabilias"
        :key="index"
        :timestamp="memorabilia.updateTime"
      >
        {{ memorabilia.content }}
      </el-timeline-item>
    </el-timeline>
    <el-dialog
      title="大事件添加"
      :visible.sync="dialogVisible"
      width="80%"
      height="80%"
    >
      <el-form
        class="memorabilia"
        :model="memorabilia"
        status-icon
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item prop="content">
          <el-input
            v-model="memorabilia.content"
            autocomplete="off"
            placeholder="请输入你的大事件内容"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 100%"
            type="primary"
            @click="submitForm('ruleForm')"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-button
      class="toadd"
      type="warning"
      icon="el-icon-star-off"
      circle
      @click="toAdd"
    ></el-button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      dialogVisible: false,
      memorabilia: {
        content: "",
      },
      memorabilias: [],
      rules: {
        content: [{ required: true, message: "必填项", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  created() {
    this.getMemorabiliaByUserId(this.userinfo.id);
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate( async (valid) => {
        if (valid) {
          //添加
            let data={
                userId:this.userinfo.id,
                content:this.memorabilia.content
            }

            let res=await this.$axios({
                url:'/api/memorabilia/add',
                method:'post',
                data:data
            })
            console.log(res)

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async getMemorabiliaByUserId(userId) {
      let res = await this.$axios({
        url: "/api/memorabilia/userMemorabilias",
        params: {
          userId: userId,
        },
      });
      if (res.data.success) {
        this.memorabilias = res.data.data.memorabilias;
      } else {
        console.log("error");
      }
    },
    toAdd() {
      this.dialogVisible = !this.dialogVisible;
    },
  },
};
</script>

<style>
.toadd {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>